<html>
<head>
    <link rel="stylesheet" href="../static/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <script src="../static/jquery/2.1.4/jquery.min.js"></script>
    <script src="../static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../static/layui/layui.all.js"></script>
    <link href="../static/layui/css/layui.css" rel="stylesheet">
</head>
<style scoped>
    body {
        position: relative;
        width: 100%;
        min-width: 700px;
        min-height: 937px;
    }
    .login_bg {
        width: 100%;
        height: 632px;
        box-sizing: border-box;
        padding-top: 28rem;
        background: url("../static/image/login/background.png") no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        /*background-size: auto 100% ;*/
    }

    .login_container {
        position: absolute;
        top: 28rem;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .title img {
        width: 50px;
        height: 50px;
    }

    .title span {
        margin-left: 20px;
        font-size: 28px;
        color: #fff;
    }

    .login_box {
        background: #fff;
        border-radius: 20px;
        margin: 30px auto 0;
        width: 500px;
        height: 325px;
        overflow: hidden;
        box-shadow: 0 4px 16px 0 rgba(2, 2, 2, .4);
    }

    .login_form {
        width: 60%;
        margin: 0 auto;
        padding-top: 50px;
    }

    .line {
        height: 40px;
        background: #fff;
        box-sizing: border-box;
        padding-left: 50px;
    }

    .code_line {
        width: 62%;
    }

    .code_img {
        height: 40px;
        margin-left: 10px;
        cursor: pointer;
    }

    input {
        outline: none;
        background: transparent;
        border: none;
        outline: medium;
    }

    .group_box {
        position: relative;
    }

    .group_icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    .account {
        width: 22px;
        height: 22px;
    }

    .login_btn {
        margin-top: 12px;
        background: #2D92B2;
        width: 100%;
        height: 40px;
        color: #fff !important;
    }

    .login_btn:hover {
        box-shadow: 0 2px 14px 0 rgba(2, 2, 2, .4);
    }

    .foot_tip {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 13px;
        color: #a7a7a7;
        letter-spacing: 1px;
    }
</style>
<body>
<div class="login_bg">
    <!-- 登录框 -->
    <div class="login_container">
        <div class="title">
            <img src="../static/image/login/logo.png">
            <span>后台管理中心</span>
        </div>
        <div class="login_box">
            <form class="form-horizontal login_form" >
                <div class="form-group group_box">
                    <img src="../static/image/login/account.png" class="group_icon account">
                    <input type="text" class="form-control line" id="username" placeholder="请输入您的账号...">
                </div>
                <div class="form-group group_box">
                    <img src="../static/image/login/password.png" class="group_icon">
                    <input type="password" class="form-control line" id="password" placeholder="请输入账号密码...">
                </div>

            </form>
            <div class="form-group">
                <button  onclick="login()" class="btn login_btn">登录</button>
            </div>
        </div>
    </div>
</div>



<script>
    var msg='${msg}';
    $(function() {
        if(msg!=='login'){
            layer.msg('请先登录');
        }
    });
function login(){
    var username=$("#username").val();
    var password=$("#password").val();
    layer.msg(username+'__'+password);
    $.ajax({
        url: "/login/login",
        type: 'post',
        data: {"username": username, "password": password},
        async: false,
        dataType: "json",
        success: function (req) {
            if (req.success) {
                window.location.href="/account/queryAll";
                layer.msg(req.message, {icon: 1})
            } else {
                layer.msg('账号密码错误')
            }
        }
    });
}


</script>
</body>
</html>